<template>
	<div>
		<view class="wrap">
			<view class="wrap-content">
				<view class="item">
					<view class="left"> 您参与的赛事 </view>
		
					<input class="value" type='text' placeholder="请输入赛事名称" placeholder-class="place" v-model="product"  />
				</view>
		
				<view class="item">
					<view class="left"> 姓名 </view>
		
					<input
						class="value"
						type="text"
						placeholder="请输入姓名"
						v-model="name"
						placeholder-class="place"
					/>
				</view>
		
				<view class="item">
					<view class="left"> 联系方式 </view>
		
					<input
						class="value"
						type="text"
						placeholder="请输入联系方式"
						v-model="mobile"
						maxlength="11"
						placeholder-class="place"
					/>
				</view>
				
				<view class="item">
					<view class="left"> 微信号 </view>
						
					<input
						class="value"
						type="text"
						placeholder="请输入微信号"
						v-model="wechatNo"
						placeholder-class="place"
					/>
				</view>
		
				<view class="content">
					<view class="left"> 留言内容 </view>
		
					<view class="area-bg">
						<textarea
							class="area"
							v-model="content"
							placeholder="请输入留言内容"
							placeholder-class="place"
							maxlength="300"
						/>
		
						<view class="limit-num"> {{ content.length }}/300 </view>
					</view>
				</view>
		
				<view class="btn" @click="onSubmit"> 提交 </view>
			</view>
		</view>
	</div>
</template>

<script>
	import {createConsultingData} from "@/utils/api.js";
	export default {
		data() {
			return {
				product: "", //咨询的产品
				name: "",
				mobile: "",
				wechatNo: "", //微信号
				content: "",
			};
		},
		onLoad() {
		},
		methods: {
			/**
			 * 提交
			 */
			onSubmit() {
				if (this.product === "") {
					this.$st.show("请输入咨询的产品");
					return;
				}
				if (this.name === "") {
					this.$st.show("请输入姓名");
					return;
				}
				if (this.mobile === "") {
					this.$st.show("请输入联系方式");
					return;
				}
				if (this.wechatNo === "") {
					this.$st.show("请输入微信号");
					return;
				}
				if (this.content === "") {
					this.$st.show("请输入问题描述");
					return;
				}
				createConsultingData({
					name: this.name,
					contact: this.mobile,
					wechatNo: this.wechatNo,
					product: this.product,
					desc: this.content
				}).then(res => {
					this.$st.success("提交成功");
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}
	.wrap {
		width: 100%;
		overflow: hidden;
		padding: 20rpx;
		box-sizing: border-box;

		.wrap-content {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 30rpx;
			box-sizing: border-box;
		}

		.item {
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #e5e5e5;
			padding: 30rpx 0;

			&:last-child {
				border-bottom: none;
			}

			.left {
				color: #333;
				font-size: 26rpx;
			}

			.value {
				width: 500rpx;
				height: 50rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #333;
				font-size: 26rpx;
				text-align: right;
			}
		}

		.content {
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			overflow: hidden;
			display: flex;
			padding: 30rpx 0;
		}
		.area-bg {
			margin-top: 30rpx;
			width: 100%;
			height: 550rpx;
			background-color: #f6f6f6;
			border-radius: 15rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;
			padding: 30rpx;
			box-sizing: border-box;

			.area {
				width: 100%;
				height: 100%;
				font-size: 26rpx;
				color: #333;
			}

			.limit-num {
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				color: #666666;
				font-size: 26rpx;
				z-index: 2;
			}
		}
		.btn {
			margin-top: 10rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #ea5520;
			color: white;
			font-size: 30rpx;
			text-align: center;
			overflow: hidden;
			border-radius: 44rpx;
		}
	}

	/deep/ .place {
		color: #666666;
	}

	view {
		line-height: 1;
	}
</style>
